// 建立一个函数来方便获取节点
// 根据id来获取元素
function $(id) {
  return document.getElementById(id);
}

// 创建div, className是其类名
function creatediv(className) {
  var div = document.createElement('div'); //创建div节点
  div.className = className;
  return div;
}


var clock = null;
var state = 0;
var speed = 3;
var flag = false; //设置标识，判断游戏是否已经开始

//点击开始游戏按钮 开始游戏
function start() {
 
  if (!flag) {
    init();
  } else {
    alert('游戏已经开始，无须再次点击！');
  }
}

/*
 *    初始化 init
 */
function init() {
  flag = true;
  for (var i = 0; i < 4; i++) {
    createrow();
  }

  // 添加onclick事件
  $('main').onclick = function (ev) {
    ev = ev || event;
    judge(ev);
  };

  // 定时器 每30毫秒调用一次move()
  clock = window.setInterval('move()', 30);
}

// 判断是否点击黑块、白块
function judge(ev) {
  if (
  //target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口
  //insertBefore() 方法可在已有的子节点前插入一个新的子节点。
    ev.target.className.indexOf('black') == -1 &&
    ev.target.className.indexOf('cell') !== -1    
  ) {
	  //parentNode 属性可返回某节点的父节点。如果指定的节点没有父节点则返回 null 。
    ev.target.parentNode.pass1 = 1; //定义属性pass，表示此行row的白块已经被点击
  }

  if (ev.target.className.indexOf('black') !== -1) {
    //点击目标元素 类名中包含 black 说明是黑块
    ev.target.className = 'cell';
    ev.target.parentNode.pass = 1; //定义属性pass，表明此行row的黑块已经被点击
    score();
  }
}

// 判断游戏是否结束

function over() {
  var rows = con.childNodes;
  if (rows.length == 5 && rows[rows.length - 1].pass !== 1) {
    fail();
  }
  for (let i = 0; i < rows.length; i++) {
    if (rows[i].pass1 == 1) {
      fail();
    }
  }
}

// 游戏结束
function fail() {
  clearInterval(clock);
  flag = false;
  var currs = parseInt($('score').innerHTML)
  var ensure = confirm('你的最终得分为 ' + parseInt($('score').innerHTML));
  var con = $('con');
  con.innerHTML = '';
  $('score').innerHTML = 0;
  con.style.top = '-408px';
  $('score2').innerHTML = currs;
}

// 创造一个<div class="row">并且有四个子节点<div class="cell">
function createrow() {
  var con = $('con'); //查找con节点，在此节点下创建row
  var row = creatediv('row'); //创建div className=row ，调用上面函数
  var arr = creatcell(); //定义div cell的类名,其中一个为cell black

  con.appendChild(row); // 添加row为con的子节点

  for (var i = 0; i < 4; i++) {
    row.appendChild(creatediv(arr[i])); //添加row的子节点 cell
  }

  if (con.firstChild == null) {
    con.appendChild(row);
  } else {
    con.insertBefore(row, con.firstChild);
  }
}

// 创建一个类名的数组，其中一个为cell black, 其余为cell
function creatcell() {
  var temp = ['cell', 'cell', 'cell', 'cell'];
  var i = Math.floor(Math.random() * 4); //随机产生黑块的位置 Math.random()函数参数 0~1的随机数
  temp[i] = 'cell black';
  return temp;
}

//让黑块动起来
function move() {
  var con = $('con');
  
  //getComputedStyle获取指定元素的样式
  var top = parseInt(window.getComputedStyle(con, null)['top']);

  if (speed + top > 0) {
    top = 0;
  } else {
    top += speed;
  }
  con.style.top = top + 'px'; //不断移动top值，使它动起来
  over();
  if (top == 0) {
    createrow();
    con.style.top = '-102px';
    delrow();
  }
}

// 加速函数
function speedup() {
  speed += 2;
  if (speed == 20) {
    alert('你超神了');
  }
}

//删除某行
function delrow() {
  var con = $('con');
  if (con.childNodes.length == 6) {
    con.removeChild(con.lastChild);
  }
}

// 记分
function score() {
  var newscore = parseInt($('score').innerHTML) + 10; //分数加10
  //parseInt解析一个字符串，并返回一个整数
  $('score').innerHTML = newscore; //修改分数
  if (newscore % 100 == 0) {
    //当分数是100 的倍数时使用加速函数，越来越快
    speedup();
  }
}